<template>
  <div class="pageContent">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row :gutter="20">
            <el-col :span="6"><span style="display: inline-block;vertical-align: middle;line-height: 40px;">平台登录日志信息</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <div style="display: inline-block;vertical-align: middle;width: 40%;">
                  <el-date-picker
                    size="small"
                    style="width: 100%;"
                    v-model="valBegin"
                    value-format="yyyyMMddHHmmss"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <span style="display: inline-block;vertical-align: middle;padding: 0 6px;">至</span>
                <div style="display: inline-block;vertical-align: middle;width: 40%;">
                  <el-date-picker
                    size="small"
                    style="width: 100%;"
                    v-model="valEnd"
                    value-format="yyyyMMddHHmmss"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <!--<div style="display: inline-block;vertical-align: middle;">-->
                <!--<el-button type="primary" @click="timeSearch" size="small">搜索</el-button>-->
                <!--</div>-->
              </div>
            </el-col>
            <el-col :span="6">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <span style="display: inline-block;vertical-align: middle;">登录成功:  </span>
                <div style="width: 130px;display: inline-block;vertical-align: middle;">
                  <el-select v-model="notValue" size="small" placeholder="登录成功" @change="selectSearch">
                    <el-option
                      v-for="item in optionsNotVal"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <div style="display: inline-block;vertical-align: middle;">
                  <el-input size="small" v-model="tableSearchCon" @blur="inputBlur" placeholder="请输入搜索内容" style="display: inline-block;width: 70%;"></el-input>
                  <el-button size="small" type="primary" @click="tableContentSearch">搜索</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="logonRelease_content">
          <el-table
            :data="tableData"
            stripe
            height="310"
            style="width: 100%">
            <el-table-column
              width="50"
              align="center"
              label="序号">
              <!--<template slot-scope="scope">-->
                <!--<span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>-->
              <!--</template>-->
              <template slot-scope="scope">
                <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              width="100"
              align="center"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="grantType"
              align="center"
              label="校验类型">
            </el-table-column>
            <el-table-column
              prop="browserType"
              align="center"
              label="浏览器类型">
            </el-table-column>
            <el-table-column
              prop="clientId"
              width="80"
              align="center"
              label="客户端ID">
            </el-table-column>
            <el-table-column
              prop="ip"
              align="center"
              label="IP地址">
            </el-table-column>
            <el-table-column
              width="80"
              align="center"
              label="成功登录">
              <template slot-scope="scope">
                <span>{{scope.row.logonFlag | loginSuccess}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="logonMsg"
              align="center"
              label="登录消息">
            </el-table-column>
            <!--<el-table-column-->
              <!--prop="logonStatus"-->
              <!--label="登录状态">-->
            <!--</el-table-column>-->
            <el-table-column
              prop="logonTime"
              align="center"
              label="登录时间">
            </el-table-column>
          </el-table>
        </div>
        <div class="tablePage" style="margin-top: 6px">
          <el-pagination
            background
            @current-change="handleSizeChange"
            :page-size="postList.rowBounds.limit"
            layout="prev, pager, next"
            :total="pageSize.count">
          </el-pagination>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      valBegin: '',
      valEnd: '',
      optionsNotVal: [
        {
          value: '2',
          label: '全部'
        },
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      notValue: '2',
      value4: '',
      value5: '',
      tableSearchCon: '',
      serialNumber: 1,
      pageSize: {},
      postList: {
        'condition': [
          { // 用户名
            property: 'username',
            value: '',
            type: 'LIKE'
          },
          { // 是否登录
            property: 'logonFlag',
            value: '',
            type: 'EQ'
          },
          { // 大于等于
            property: 'logonTime',
            value: '',
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: '',
            type: 'LE'
          }
        ],
        'rowBounds': {
          'offset': 0,
          'limit': 10
        }
      },
      tableData: []
    }
  },
  computed: {

  },
  filters: { // 计算属性
    loginSuccess: function(value) {
      if (value == 0) {
        return '否'
      } else {
        return '是'
      }
    }
  },
  components: { },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() { // 获取内容
      this.$store
        .dispatch('LogonLogInformation', this.postList)
        .then(res => {
          this.tableData = res.data.records
          this.pageSize = res.data
        })
        .catch(() => {

        })
    },
    inputBlur() { // 搜索框失去焦点
      if (this.tableSearchCon == '') {
        const num = this.dataFor(this.postList.condition, 'username')
        this.postList.condition[num].value = ''
        this.fetchData()
        this.serialNumber = 1
      }
    },
    handleSizeChange(val) { // 分页
      this.postList.rowBounds.offset = (val - 1) * 10
      this.serialNumber = val
      this.fetchData()
    },
    timeSearch() { // 时间搜索
      console.log(this.valBegin)
      console.log(this.valEnd)
      this.postList.condition.splice(-2, 2)
      if (this.valBegin == '' && this.valEnd == '') {
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: '',
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: '',
            type: 'LE'
          }
        )
        this.fetchData()
      } else if (this.valBegin != '' && this.valEnd == '') { // 今天
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: this.valBegin,
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: '',
            type: 'LE'
          }
        )
        this.fetchData()
      } else if (this.valBegin == '' && this.valEnd != '') { // 今天之前
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: '',
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: this.valEnd,
            type: 'LE'
          }
        )
        this.fetchData()
      } else {
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: this.valBegin,
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: this.valEnd,
            type: 'LE'
          }
        )
        this.fetchData()
      }
    },
    selectSearch(val) { // 是否登录成功搜索
      if (val == 2) {
        const num = this.dataFor(this.postList.condition, 'logonFlag')
        this.postList.condition[num].value = ''
        this.fetchData()
      } else {
        const num = this.dataFor(this.postList.condition, 'logonFlag')
        this.postList.condition[num].value = val
        this.fetchData()
      }
    },
    tableContentSearch() { // 用户名搜索
      if (this.tableSearchCon) {
        this.postList.rowBounds.offset = 0
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'username')
        this.postList.condition[num].value = this.tableSearchCon
        this.fetchData()
      } else {
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'username')
        this.postList.condition[num].value = ''
        this.fetchData()
      }
      // ---------------------------------------
      this.postList.condition.splice(-2, 2)
      if (this.valBegin == '' && this.valEnd == '') {
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: '',
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: '',
            type: 'LE'
          }
        )
        this.fetchData()
      } else if (this.valBegin != '' && this.valEnd == '') { // 今天
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: this.valBegin,
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: '',
            type: 'LE'
          }
        )
        this.fetchData()
      } else if (this.valBegin == '' && this.valEnd != '') { // 今天之前
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: '',
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: this.valEnd,
            type: 'LE'
          }
        )
        this.fetchData()
      } else {
        this.postList.condition.push(
          { // 大于等于
            property: 'logonTime',
            value: this.valBegin,
            type: 'GE'
          },
          { // 小于等于
            property: 'logonTime',
            value: this.valEnd,
            type: 'LE'
          }
        )
        this.fetchData()
      }
    },
    dataFor(arr, myData) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].property == myData) {
          return i
        }
      }
    }
  }
}
</script>
<style scoped>
  .logonRelease_title span{
    font-size: 22px;
    color: #333333;
    display: inline-block;
  }
  .logonRelease_content{
    width: 100%;
  }
</style>

